<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>日志查询</div>
      </div></el-col>
    </el-row>
    <!--  查询条件-->
    <el-form :inline="true" :model="queryForm" style="text-align: left; margin: 0 10%">
      <el-form-item label="用户">
        <el-input v-model="queryForm.operator" placeholder="用户" clearable></el-input>
      </el-form-item>
      <el-form-item label="IP">
        <el-input v-model="queryForm.ip" placeholder="IP地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="queryForm.startTime"
          type="datetime"
          placeholder="开始日期时间">
        </el-date-picker>
        -
        <el-date-picker
          v-model="queryForm.endTime"
          type="datetime"
          placeholder="结束日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="queryForm.type" placeholder="请选择" clearable>
          <el-option
            v-for="item in typeList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模块">
        <el-select v-model="queryForm.module" placeholder="请选择" clearable>
          <el-option
            v-for="item in moduleList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="getList" plain>查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
      </div></el-col>
    </el-row>
    <div id="s" class="animate__animated animate__zoomIn animate__delay-1s" style="margin-top: 20px">
    <!--  数据表格-->
    <el-table :data="tableData" stripe style="width: 100%;" :border="true"
              :header-cell-style="{background:'#209e91', color:'#ffffff',textAlign:'center'}">
      <el-table-column
        prop="operator"
        label="用户"
        align="center">
      </el-table-column>
      <el-table-column
        prop="time"
        label="时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="ip"
        label="ip"
        align="center">
      </el-table-column>
      <el-table-column
        prop="module"
        label="模块"
        align="center">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        align="center">
      </el-table-column>
      <el-table-column
        prop="voNum"
        label="操作对象"
        align="center">
      </el-table-column>

    </el-table>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
    <!--  分页-->
    <el-pagination
      @size-change="getList"
      @current-change="getList"
      :current-page.sync="queryForm.pageNum"
      :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
      :page-size.sync="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysLog",
  data() {
    return {
      //查询对象
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        operator:'',
        ip: '',
        startTime: '',
        endTime: '',
        type: '',
        module:''
      },
      //表格数组
      tableData: [],
      //共多少条
      total: 0,
      typeList: ['登录','退出'],
      moduleList: ['系统'],
    }
  },
  methods:{
    getList(){
      this.$axios({
        url: 'sys/log/list',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
</style>
